CSS transition-property

Met deze eigenschap kan je opgeven welke eigenschappen onderhevig zijn aan de transitie.

Welke CSS eigenschappen kunnen geanimeerd worden?

Typische eigenschappen zijn:

• lay-out (breedte, hoogte, opvulling, marges, randen);
• positionele eigenschappen (links, rechts, boven, onder)
• transformaties
• lettergroottes
• kleuren
• achtergrondkleuren
• opaciteit…

Voorbeelden:

width, e.g. 10em to 200px
padding, e.g. 0px to 10px
color, e.g. #F00 to #00F
top, e.g. 0px to 300px
border-radius, e.g. 10px to 3px
transform, e.g. rotate(0deg) to rotate(90deg)

Je kan ook overgangen toepassen op de trefwoorden voor kleuren zoals maroon, fuchsia en teal, omdat deze effectief worden omgezet in RGB-waarden.

De transition-property eigenschap declareert de CSS-eigenschappen waarop een overgang toegepast moet worden, bijvoorbeeld:

#container
{
    transition-property: font-size;
}

Nu gaat alleen de font-size eigenschap onderworpen worden aan de transitieregel en niet het afronden van de hoeken van de container.

Je kan meer dan één property laten overgaan met elk zijn eigen transitie:

transition: font-size 3s ease-in, border-radius 3s ease-in;